
<template>
  <el-container class="main-layout">
    <!-- 侧边栏 -->
    <el-aside
        :width="isCollapse ? '64px' : '200px'"
        class="sidebar"
        style="
        transition: width 0.3s;
        background: #545c64;
        border-right: none !important; <!-- 确保容器无边框 -->
    "
    >
      <el-scrollbar>
        <AsidePage :collapse="isCollapse" />
      </el-scrollbar>
    </el-aside>

    <!-- 头部及内容区 -->
    <el-container class="content-wrapper">
      <el-header class="header">
        <!-- 传递collapse状态并监听事件 -->
        <HeaderPage :collapse="isCollapse" @toggle-collapse="isCollapse = !isCollapse"/>
      </el-header>

      <el-main class="main-content">
        <!-- 新增路由出口 -->
        <router-view></router-view>
      </el-main>
    </el-container>
  </el-container>
</template>

<script setup>
import { ref } from 'vue'
import AsidePage from './AsidePage.vue'
import HeaderPage from "@/components/HeaderPage.vue"

const isCollapse = ref(false)
</script>

<style scoped>
.main-layout {
  height: 100vh;
  display: flex;
}

.sidebar {
  transition: width 0.3s;
  background: #545c64;
}

.content-wrapper {
  flex: 1;
  min-width: 0; /* 防止内容溢出 */
}

.header {
  height: 70px;
  display: flex;
  align-items: center;
  background: #ffffff;
  border-bottom: 1px solid #939399;
  padding: 0 20px;
}

.main-content {
  padding: 0;
  background: #f5f7fa;
  height: calc(100vh - 70px);
}
</style>
